<template>
  <div v-loading="loading" class="wrap">
    <!--    <top-title bgcolor="transparent" title="项目详情" ref="top_title" @go_back="go_back"></top-title>-->
    <div class="top_box">
      <button class="fl flex hand" @click="go_back()">
        <img src="~@/assets/images/tx_answer/accessRecord/return.png">
        <span>返回</span>
      </button>
      <div>员工学习详情</div>
    </div>
    <div class="body_box flex">
      <div class="left_box">
        <div class="portrait_box">
          <img :src="user_info.realpicurl" v-if="user_info.realpicurl">
          <img src="~@/assets/images/tx_answer/accessRecord/man_zj.png" v-else>
        </div>
        <p class="staff_name">{{user_info.renames}}</p>
        <p class="staff_num">No.{{user_info.staffnum}}</p>
        <div class="staff_type">{{user_info.postname}}</div>
      </div>
      <div class="right_box">
        <div class="right_top_nav scroll-webkit">
          <ul class="flex">
            <li v-for="(item,index) in job_list" class="hand" :class="job_index==index?'ative':''"
                @click="job_click(index)">{{item.simpleName?item.simpleName+'/':''}}{{item.directoryName}}
            </li>
          </ul>
        </div>
        <div class="right_con scroll-webkit" ref="right_con" @scroll="right_con_scroll($event)">
          <div class="overview_box">
            <p class="overview_tit">数据总览</p>
            <ul class="overview_ul flex">
              <li v-for="(obj,key) in overview_json" :class="obj.class_name">
                <p class="overview_li_tit">{{obj.tit}}</p>
                <p class="overview_li_progress">{{obj.progress}}%</p>
                <p class="overview_li_duration">时长 {{obj.duration}}</p>
              </li>
            </ul>
          </div>
          <div class="separation_box" :class="con_scroll_bl?'separation_box_fixed':''"
               :style="{width:con_scroll_bl?'calc(100% - 210px - '+con_scroll_w+'px)':'auto'}">
            <p class="overview_tit">分日数据</p>
            <ul class="separation_nav flex">
              <li :class="con_index==0?'ative':''" @click="con_index_click(0)">近7天</li>
              <li :class="con_index==1?'ative':''" @click="con_index_click(1)">近14天</li>
              <li :class="con_index==2?'ative':''" @click="con_index_click(2)">近30天</li>
              <li :class="con_index==3?'ative':''" @click="con_index_click(3)">近90天</li>
              <li :class="con_index==4?'ative':''" @click="con_index_click(4)">全部</li>
            </ul>
            <div class="table_box thead_table" style="padding: 0;">
              <el-table :data="table_data" style="width: 100%" :key="1">
                <el-table-column prop="" label="日期" min-width="135" height="40" :resizable="false"
                                 class-name="table_border">
                  <template slot="header" slot-scope="scope">
                    <div class="text_left pd20">日期</div>
                  </template>
                  <template slot-scope="scope">
                    <div class="text_left pd20">{{scope.row.date}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="" min-width="135" height="40" :resizable="false"
                                 class-name="table_border">
                  <template slot="header" slot-scope="scope">
                    <div class="text_left pd20">学习时长</div>
                  </template>
                  <template slot-scope="scope">
                    <div class="text_left pd20">3h23m</div>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="板块" min-width="130" height="40" :resizable="false">
                  <template slot-scope="scope">
                    <span class="hand table_num_span">12</span>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="专题" min-width="130" height="40" :resizable="false">
                  <template slot-scope="scope">
                    <span class="hand table_num_span">12</span>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="知识点" min-width="130" height="40" :resizable="false"
                                 class-name="table_border">
                  <template slot-scope="scope">
                    <span class="hand table_num_span">12</span>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="视频" min-width="130" height="40" :resizable="false"
                                 class-name="table_border">
                  <template slot-scope="scope">
                    <span class="hand table_num_span">12</span>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="文档" min-width="130" height="40" :resizable="false"
                                 class-name="table_border">
                  <template slot-scope="scope">
                    <span class="hand table_num_span">12</span>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="实操" min-width="130" height="40" :resizable="false">
                  <template slot-scope="scope">
                    <span class="hand table_num_span">12</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="table_box" :class="con_scroll_bl?'table_box_fixed':''">
            <el-table :data="table_data" style="width: 100%" :key="1">
              <el-table-column prop="" label="日期" min-width="135" height="40" :resizable="false"
                               class-name="table_border">
                <template slot="header" slot-scope="scope">
                  <div class="text_left pd20">日期</div>
                </template>
                <template slot-scope="scope">
                  <div class="text_left pd20">{{scope.row.date}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="" label="" min-width="135" height="40" :resizable="false"
                               class-name="table_border">
                <template slot="header" slot-scope="scope">
                  <div class="text_left pd20">学习时长</div>
                </template>
                <template slot-scope="scope">
                  <div class="text_left pd20">{{scope.row.dayDuration_}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="" label="板块" min-width="130" height="40" :resizable="false">
                <template slot-scope="scope">
                  <span class="hand table_num_span"
                        @click="record_show(scope.row,0)">{{scope.row.dayDirectoryNum}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="专题" min-width="130" height="40" :resizable="false">
                <template slot-scope="scope">
                  <span class="hand table_num_span" @click="record_show(scope.row,1)">{{scope.row.dayTaskNum}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="知识点" min-width="130" height="40" :resizable="false"
                               class-name="table_border">
                <template slot-scope="scope">
                  <span class="hand table_num_span" @click="record_show(scope.row,2)">{{scope.row.dayPointNum}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="视频" min-width="130" height="40" :resizable="false"
                               class-name="table_border">
                <template slot-scope="scope">
                  <span class="hand table_num_span" @click="record_show(scope.row,3)">{{scope.row.dayVideoNum}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="文档" min-width="130" height="40" :resizable="false"
                               class-name="table_border">
                <template slot-scope="scope">
                  <span class="hand table_num_span" @click="record_show(scope.row,4)">{{scope.row.dayPicNum}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="实操" min-width="130" height="40" :resizable="false">
                <template slot-scope="scope">
                  <span class="hand table_num_span" @click="record_show(scope.row,5)">{{scope.row.dayOperNum}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="record_mask_bg" v-if="record_mask">
      <div class="record_mask">
        <div class="record_mask_tit">
          <span class="record_mask_date">{{record_mask_json.date}}</span>
          <span class="record_mask_duration">学习时长<span>{{record_mask_json.dayDuration_}}</span></span>
        </div>
        <img src="/image/admin/deputy_close.png" class="record_mask_close" @click="record_mask_hide()">
        <ul class="record_mask_nav flex">
          <li :class="[mask_index==0?'ative':'',record_mask_json.dayDirectoryNum?'':'no_num']"
              @click="mask_nav_click(0)">板块{{record_mask_json.dayDirectoryNum?'·'+record_mask_json.dayDirectoryNum:''}}
          </li>
          <li :class="[mask_index==1?'ative':'',record_mask_json.dayTaskNum?'':'no_num']" @click="mask_nav_click(1)">
            专题{{record_mask_json.dayTaskNum?'·'+record_mask_json.dayTaskNum:''}}
          </li>
          <li :class="[mask_index==2?'ative':'',record_mask_json.dayPointNum?'':'no_num']" @click="mask_nav_click(2)">
            知识点{{record_mask_json.dayPointNum?'·'+record_mask_json.dayPointNum:''}}
          </li>
          <li :class="[mask_index==3?'ative':'',record_mask_json.dayVideoNum?'':'no_num']" @click="mask_nav_click(3)">
            视频{{record_mask_json.dayVideoNum?'·'+record_mask_json.dayVideoNum:''}}
          </li>
          <li :class="[mask_index==4?'ative':'',record_mask_json.dayPicNum?'':'no_num']" @click="mask_nav_click(4)">
            文档{{record_mask_json.dayPicNum?'·'+record_mask_json.dayPicNum:''}}
          </li>
          <li :class="[mask_index==5?'ative':'',record_mask_json.dayOperNum?'':'no_num']" @click="mask_nav_click(5)">
            实操{{record_mask_json.dayOperNum?'·'+record_mask_json.dayOperNum:''}}
          </li>
        </ul>
        <ul class="record_mask_con">
          <li class="record_mask_item">
            <!-- <p class="record_mask_item_tit" v-if="mask_index==0">板块</p>
            <p class="record_mask_item_tit" v-if="mask_index==1">专题</p>
            <p class="record_mask_item_tit" v-if="mask_index==2">知识点</p>
            <p class="record_mask_item_tit" v-if="mask_index==3">视频</p>
            <p class="record_mask_item_tit" v-if="mask_index==4">文档</p>
            <p class="record_mask_item_tit" v-if="mask_index==5">实操</p> -->
            <ul class="record_mask_item_ul scroll-webkit" @scroll="record_mask_scroll($event)">
              <li v-for="(item,index) in record_list" class="text_hidden" :title="item.name">{{item.name}}</li>
            </ul>
          </li>
          <!-- <li class="record_mask_item" v-if="mask_index==1">
            <p class="record_mask_item_tit">专题</p>
            <ul class="record_mask_item_ul">
              <li v-for="i in 10">外场测试行业英语（术语）</li>
            </ul>
          </li>
          <li class="record_mask_item" v-if="mask_index==2">
            <p class="record_mask_item_tit">知识点</p>
            <ul class="record_mask_item_ul">
              <li v-for="i in 10">外场测试行业英语（术语）</li>
            </ul>
          </li>
          <li class="record_mask_item" v-if="mask_index==3">
            <p class="record_mask_item_tit">视频</p>
            <ul class="record_mask_item_ul">
              <li v-for="i in 10">外场测试行业英语（术语）</li>
            </ul>
          </li>
          <li class="record_mask_item" v-if="mask_index==4">
            <p class="record_mask_item_tit">文档</p>
            <ul class="record_mask_item_ul">
              <li v-for="i in 10">外场测试行业英语（术语）</li>
            </ul>
          </li>
          <li class="record_mask_item" v-if="mask_index==5">
            <p class="record_mask_item_tit">实操</p>
            <ul class="record_mask_item_ul">
              <li v-for="i in 10">外场测试行业英语（术语）</li>
            </ul>
          </li> -->
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
  var _this
  var tips_settimeout
  var tsb = 'txb.we17.com'//同事宝正式服域名
  var this_url = window.location.href
  var ajax_domain_before = ''
  if (this_url.indexOf('https') != -1) {
    ajax_domain_before = 'https'
  } else {
    ajax_domain_before = 'http'
  }
  var ajax_domain = ''
  var this_domain = document.domain
  if (this_domain.indexOf(tsb) != -1) {//如果当前是同事宝正式服
    ajax_domain = ajax_domain_before + '://in.link17.com'
  } else {
    ajax_domain = ajax_domain_before + '://test.008box.com'
  }

  var earliest_day_time = new Date('2018-01-01').getTime()
  var day_time = 1000 * 60 * 60 * 24
  var right_con_scroll_h_ = 0
  var ajax_loading_num = 0
  import {
    getCommonData
  } from '@/api/tx_answer/common'
  import currencyDate from '@/plugins/json/currency_json.json'
  import topTitle from '@/components/TopTitle'

  export default {
    name: 'simCardDelete',
    components: {
      'top-title': topTitle
    },
    props: {},
    data() {
      return {
        loading: false,
        current_day: '',

        back_url: 'access_records.html',
        user_info: {},
        overview_json: {
          all: { tit: '全部内容', progress: '', duration: '', class_name: 'overview_li_1' },
          knowledge: { tit: '知识点', progress: '', duration: '', class_name: 'overview_li_2' },
          video: { tit: '视频教程', progress: '', duration: '', class_name: 'overview_li_3' },
          file: { tit: '学习文档', progress: '', duration: '', class_name: 'overview_li_4' },
          practical: { tit: '实操作业', progress: '', duration: '', class_name: 'overview_li_5' }
        },
        table_data: [],
        con_scroll_bl: false,
        con_scroll_w: 0,
        job_list: [],
        job_index: 0,
        date_all_json: {},
        con_index: 0,
        currency_page: 1,
        get_list_ajax_bl: false,
        // 弹窗
        record_mask: false,
        record_mask_json: {},
        mask_index: 0,
        record_page: 1,
        record_list: [],
        record_list_data_bl: true
      }

    },
    created: function() { //html加载完成之前
      _this = this
      _this.authId = _this.$cache.session.get('authId')
      _this.companyid = _this.$cache.session.get('admin_companyid')
      _this.cur_date = _this.$cache.session.get('cur_date')
      _this.user_info = JSON.parse(sessionStorage.getItem('admin_staffStudyDetails_json'))//员工uid
      _this.current_day = _this.formatDate(new Date())

    },
    mounted: function() {//页面加载时
      _this.get_job_list()
      console.log(_this.$refs.right_con.scrollTop)
    },
    methods: {
      tips_show: function(text) {//提示框
        var that = this
        that.tips_text = text
        that.tips_bl = true
        clearTimeout(tips_settimeout)
        tips_settimeout = setTimeout(function() {
          that.tips_bl = false
        }, 2000)
      },
      get_table_height: function() {
        setTimeout(function() {
          let num = 195
          _this.table_h = document.documentElement.clientHeight - num
        })
      },
      get_scroll_w: function() {
        _this.$nextTick(function() {
          console.log(_this.$refs.right_con)
          var odiv = _this.$refs.right_con
          var scrollbarWidth = odiv.offsetWidth - odiv.clientWidth//相减
          _this.con_scroll_w = scrollbarWidth
        })
      },
      get_job_list: function() {
        _this.loading = true
        var ajax_url = _this.get_ajax_url('/web/getJobs')
        var ajax_type = 'get'
        var ajax_data = {}
        getCommonData(ajax_url, ajax_data, ajax_type).then(data => {
          if (data.success) {
            _this.job_list = data.data
          } else {
            _this.tips_show(data.msg)
          }
          _this.job_click(0)
        })
      },
      job_click: function(index) {
        ajax_loading_num = 0
        _this.job_index = index
        _this.table_data = []
        _this.currency_page = 1
        _this.$refs.right_con.scrollTop = 0
        _this.get_list()
        _this.get_data_info()
      },
      get_data_info: function() {//获取数据总览
        _this.loading = true
        var ajax_url = _this.get_ajax_url('/web/getPersonalCountOverviewByUidJobId')
        var ajax_type = 'get'
        var ajax_data = {
          jobId: _this.job_list[_this.job_index].directoryId,
          queryUid: _this.user_info.uid
        }
        getCommonData(ajax_url, ajax_data, ajax_type)
          .then(data => {
            console.log(data)
            if (data.success) {
              _this.date_all_json = data.data
              let this_obj = data.data
              // overview_json:{
              // 	all:{tit:'全部内容',progress:'33',duration:'123h12m',class_name:'overview_li_1'},
              // 	knowledge:{tit:'知识点',progress:'33',duration:'123h12m',class_name:'overview_li_2'},
              // 	video:{tit:'视频教程',progress:'33',duration:'123h12m',class_name:'overview_li_3'},
              // 	file:{tit:'学习文档',progress:'33',duration:'123h12m',class_name:'overview_li_4'},
              // 	practical:{tit:'实操作业',progress:'33',duration:'123h12m',class_name:'overview_li_5'},
              // },
              let all_s = this_obj.totalPointDuration + this_obj.totalPicDuration + this_obj.totalVideoDuration + this_obj.totalOperDuration
              let all_num = this_obj.totalPointNum + this_obj.totalPicNum + this_obj.totalVideoNum + this_obj.totalOperNum
              let stu_num = this_obj.totalStuVideoNum + this_obj.totalStuPicNum + this_obj.totalVideoNum + this_obj.totalStuOperNum
              if (this_obj.totalPointNum) {
                _this.overview_json.knowledge.progress = Math.floor((this_obj.totalStuPointNum / this_obj.totalPointNum) * 100)//知识点百分比
              } else {
                _this.overview_json.knowledge.progress = 0
              }
              if (this_obj.totalPicNum) {
                _this.overview_json.file.progress = Math.floor((this_obj.totalStuPicNum / this_obj.totalPicNum) * 100)//文档
              } else {
                _this.overview_json.file.progress = 0
              }
              if (this_obj.totalVideoNum) {
                _this.overview_json.video.progress = Math.floor((this_obj.totalStuVideoNum / this_obj.totalVideoNum) * 100)//视频
              } else {
                _this.overview_json.video.progress = 0
              }
              if (this_obj.totalOperNum) {
                _this.overview_json.practical.progress = Math.floor((this_obj.totalStuOperNum / this_obj.totalOperNum) * 100)//实操
              } else {
                _this.overview_json.practical.progress = 0
              }
              if (all_num) {
                _this.overview_json.all.progress = Math.floor((stu_num / all_num) * 100)//全部
              } else {
                _this.overview_json.all.progress = 0
              }
              _this.overview_json.knowledge.duration = _this.get_duration(this_obj.totalPointDuration)//知识点时间
              _this.overview_json.file.duration = _this.get_duration(this_obj.totalPicDuration)//
              _this.overview_json.video.duration = _this.get_duration(this_obj.totalVideoDuration)//
              _this.overview_json.practical.duration = _this.get_duration(this_obj.totalOperDuration)//
              _this.overview_json.all.duration = _this.get_duration(all_s)//
              _this.date_all_json = this_obj
            } else {
              _this.tips_show(data.msg)
            }
            ajax_loading_num++
            if (ajax_loading_num >= 2) {
              _this.loading = false
            }
          }).catch(function() {

          _this.loading = false
        })
      },
      get_duration(s) {
        let this_m = Math.floor(s / 60)//转换为分钟
        if (this_m > 60) {
          let this_h = Math.floor(this_m / 60)//获取小时
          let h_m = this_m % 60
          return this_h + 'h' + h_m + 'm'
        } else {
          return this_m + 'm'
        }
      },
      con_index_click: function(index) {
        if (_this.con_index == index) {
          return
        }
        _this.con_index = index
        _this.table_data = []
        _this.currency_page = 1
        _this.get_list()
      },
      get_days: function() {
        // num_ 7 7天；14 14天 30 30天 90 90天  全部
        let num = 0
        if (_this.con_index == 0) {
          num = 7
        } else if (_this.con_index == 1) {
          num = 14
        } else if (_this.con_index == 2) {
          num = 30
        } else if (_this.con_index == 3) {
          num = 90
        } else if (_this.con_index == 4) {
          num = ''
        }
        let start_time = ''
        let end_time_ = _this.current_day
        let end_time
        if (!num) {//全部
          start_time = _this.formatDate(new Date(end_time_).getTime() - (_this.currency_page * 30 * day_time))
          if (_this.currency_page > 1) {
            end_time = _this.formatDate(new Date(end_time_).getTime() - ((_this.currency_page - 1) * 30 * day_time))
          } else {
            end_time = end_time_
          }
        } else {
          start_time = _this.formatDate(new Date(_this.current_day).getTime() - (num * day_time))
          end_time = end_time_
        }
        return _this.get_day_list(start_time, end_time)
      },
      get_day_list(start, end) {
        var day_time = 1000 * 60 * 60 * 24//1天时间
        var start_time_ = new Date(start).getTime()
        var end_time_ = new Date(end).getTime()
        var start_time = 0
        var end_time = 0
        if (start_time_ > end_time_) {
          let this_m = new Date(end).getMonth()
          let this_d = new Date(end).getDate()
          end_time_ = new Date(_this.current_day.getFullYear() + 1, this_m, this_d).getTime() + 1000 * 60 * 60 * 8//0点 要加到8点
        }
        start_time = start_time_
        end_time = end_time_
        var arr = []
        for (var i = 1; start_time + (i * day_time) <= end_time; i++) {
          arr.push(_this.formatDate(start_time + (i * day_time)))
        }
        return arr
      },
      get_list: function() {
        let day_list = _this.get_days()
        let days_str = day_list.join(',')
        _this.loading = true
        _this.get_list_ajax_bl = true
        let right_con_scroll_h = _this.$refs.right_con.scrollTop
        var ajax_url = _this.get_ajax_url('/web/getPersonalCountDayByUidJobIdDays')
        var ajax_type = 'get'
        var ajax_data = {
          jobId: _this.job_list[_this.job_index].directoryId,
          queryUid: _this.user_info.uid,
          days: days_str
        }
        getCommonData(ajax_url, ajax_data, ajax_type)
          .then(data => {
            console.log(data)
            if (data.success) {
              let arr = data.data
              arr.forEach(function(item) {
                _this.$set(item, 'dayDuration_', _this.get_duration(item.dayDuration))
              })
              console.log()
              if (_this.con_index == 4) {
                _this.table_data = _this.table_data.concat(data.data)
              } else {
                _this.table_data = data.data
              }
              _this.$nextTick(function() {
                _this.$refs.right_con.scrollTop = right_con_scroll_h
              })
            }
            ajax_loading_num++
            if (ajax_loading_num >= 2) {
              _this.loading = false
            }
            _this.get_list_ajax_bl = false
            _this.get_scroll_w()

          }).catch(function() {

          _this.loading = false
        })
        // for(let i=0;i<100;i++){
        // 	_this.table_data.push({});
        // }
      },
      right_con_scroll: function(e) {
        let scrollTop = e.target.scrollTop
        if (scrollTop >= 150) {
          _this.con_scroll_bl = true
        } else {
          _this.con_scroll_bl = false
        }
        let ele = e.srcElement ? e.srcElement : e.target
        if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 50) { //监听滚动到div底部
          let this_bl = true
          if (earliest_day_time >= new Date(_this.current_day).getTime() - ((_this.currency_page) * 30 * day_time)) {
            this_bl = false
          }
          if (_this.get_list_ajax_bl == false && this_bl && _this.con_index == 4) {//如果ajax已经结束，和还有数据
            _this.currency_page++
            _this.get_list()
          }
        }
      },
      // 弹窗
      record_show: function(row, index) {
        right_con_scroll_h_ = _this.$refs.right_con.scrollTop
        _this.record_mask_json = row
        _this.mask_index = index
        _this.record_page = 1
        _this.record_list_data_bl = true
        _this.record_list = []
        _this.get_record_list()
      },
      record_mask_show: function() {
        window.parent.nav(true)
        _this.record_mask = true
        _this.$nextTick(function() {
          _this.$refs.right_con.scrollTop = right_con_scroll_h_
        })
      },
      record_mask_hide: function() {
        window.parent.nav(false)
        _this.record_mask = false
      },
      mask_nav_click: function(index) {
        _this.record_page = 1
        _this.record_list_data_bl = true
        _this.record_list = []
        _this.mask_index = index
        _this.get_record_list()
      },
      get_record_list: function() {
        let ajax_url = ''
        if (_this.mask_index == 0) {
          ajax_url = '/web/getPersonalStuDirectoriesPageByUidJobIdDay'
        } else if (_this.mask_index == 1) {
          ajax_url = '/web/getPersonalStuTasksPageByUidJobIdDay'
        } else if (_this.mask_index == 2) {
          ajax_url = '/web/getPersonalStuPointsPageByUidJobIdDay'
        } else if (_this.mask_index == 3) {
          ajax_url = '/web/getPersonalStuVideosPageByUidJobIdDay'
        } else if (_this.mask_index == 4) {
          ajax_url = '/web/getPersonalStuPicsPageByUidJobIdDay'
        } else if (_this.mask_index == 5) {
          ajax_url = '/web/getPersonalStuOpersPageByUidJobIdDay'
        }
        _this.loading = true
        var url = _this.get_ajax_url(ajax_url)
        var ajax_type = 'get'
        var ajax_data = {
          jobId: _this.job_list[_this.job_index].directoryId,
          queryUid: _this.user_info.uid,
          current: _this.record_page,
          size: 30,
          dayStr: _this.record_mask_json.date
        }
        getCommonData(ajax_url, ajax_data, ajax_type)
          .then(data => {
            console.log(data)
            if (data.success) {
              let arr = data.data.records
              arr.forEach(function(item) {
                let name = ''
                if (_this.mask_index == 0) {
                  name = item.directoryName
                } else if (_this.mask_index == 1) {
                  name = item.title
                } else if (_this.mask_index == 2) {
                  name = item.pointContent
                } else if (_this.mask_index == 3) {
                  name = item.title
                } else if (_this.mask_index == 4) {
                  name = item.title
                } else if (_this.mask_index == 5) {
                  name = item.title
                }
                _this.$set(item, 'name', name)
              })
              _this.record_list = _this.record_list.concat(arr)
              if (arr.length < data.data.size) {
                _this.record_list_data_bl = false
              }
              _this.record_mask_show()//弹窗展示
            }
            _this.loading = false

          }).catch(function() {

          _this.loading = false
        })
      },
      record_mask_scroll: function(e) {
        let ele = e.srcElement ? e.srcElement : e.target
        if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 50) { //监听滚动到div底部
          if (_this.loading == false && _this.record_list_data_bl) {//如果ajax已经结束，和还有数据
            _this.record_page++
            _this.get_record_list()
          }
        }
      },
      get_ajax_url(str) {
        return ajax_domain + str
      }
    }
  }
</script>

<style scoped>
  body {
    color: #333;
  }

  .wrap {
    background: #fff;
  }

  .el-table__fixed-right::before, .el-table__fixed::before, .el-table::before {
    background-color: #EBEEF5;
  }

  .pd20 {
    padding: 0 20px;
  }

  .top_box button {
    align-items: center;
    height: 24px;
    width: 51px;
    justify-content: center;
    border: 1px solid #DDDDDD;
    border-radius: 2px;
  }

  .top_box button img {
    margin-right: 5px;
    width: 6px;
  }

  .top_box > div {
    font-size: 16px;
    text-align: center;
    height: 24px;
    line-height: 24px;
    font-weight: bold;
  }

  .top_box {
    padding: 13px 20px;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.10);
    position: relative;
    z-index: 2;
  }

  /*顶部完*/
  /*左侧*/
  .left_box {
    width: 200px;
    flex-shrink: 0;
    text-align: center;
    background-color: #fff;
    height: calc(100vh - 101px);
  }

  .portrait_box {
    margin: 0 auto;
    margin-top: 26px;
    width: 100px;
    /*height: 100px;*/
    border-radius: 5px;
    border: 4px solid #EEEEEE;
    box-sizing: border-box;
    overflow: hidden;
  }

  .portrait_box img {
    width: 100%;
    height: 100%;
    object-position: 50% 50%;
    object-fit: cover;
    display: block;
  }

  .staff_name {
    font-size: 24px;
    font-weight: bold;
    margin-top: 14px;
  }

  .staff_num {
    color: #888;
    margin-top: 5px;
  }

  .staff_type {
    height: 20px;
    line-height: 20px;
    box-sizing: border-box;
    text-align: center;
    padding: 0 8px;
    border-radius: 2px;
    border: 1px solid #DDDDDD;
    margin: 0 auto;
    margin-top: 8px;
    display: inline-block;
  }

  /*右侧*/
  .right_box {
    border-left: 10px solid #F7F7F7;
    width: calc(100% - 200px);
    box-sizing: border-box;
    padding-bottom: 20px;
  }

  .right_con {
    height: calc(100vh - 189px);
    overflow: auto;
  }

  .right_top_nav {
    padding-bottom: 17px;
    overflow-x: auto;
    overflow-y: hidden;
    height: 50px;
  }

  .right_top_nav > ul {
    height: 50px;
    border-bottom: 1px solid #EEEEEE;
    width: 100%;
  }

  .right_top_nav ul li {
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    flex-shrink: 0;
  }

  .right_top_nav ul li.ative {
    position: relative;
    font-weight: bold;
  }

  .right_top_nav ul li.ative:after {
    content: '';
    position: absolute;
    width: calc(100% - 40px);
    box-sizing: border-box;
    padding: 0 20px;
    bottom: 0;
    left: 20px;
    background-color: #1CBECC;
    border-radius: 2px;
    height: 3px;
  }

  /*数据总览*/
  .overview_box {
    padding: 0 20px;
    padding-top: 3px;
  }

  .overview_tit {
    font-size: 14px;
    font-weight: bold;
  }

  .overview_ul {
    margin-top: 10px;
    justify-content: space-between;
  }

  .overview_ul > li {
    height: 102px;
    width: calc(20% - 8px);
    padding-top: 14px;
    padding-left: 16px;
    box-sizing: border-box;
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-color: #F6F6F6;
    border-radius: 8px;
    /*margin-right: 10px;*/
  }

  .overview_li_tit {
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    font-weight: bold;
  }

  .overview_li_progress {
    font-size: 24px;
    margin-top: 2px;
    height: 29px;
    line-height: 29px;
    font-weight: bold;
  }

  .overview_li_duration {
    font-size: 14px;
    color: #888;
    margin-top: 5px;
    height: 20px;
    line-height: 20px;
  }

  .overview_ul > li.overview_li_1 {
    background-image: url(~@/assets/images/tx_answer/accessRecord/overview_icon1.png);
    background-color: rgba(255, 151, 0, 0.1);
  }

  .overview_ul > li.overview_li_2 {
    background-image: url(~@/assets/images/tx_answer/accessRecord/overview_icon2.png);
  }

  .overview_ul > li.overview_li_3 {
    background-image: url(~@/assets/images/tx_answer/accessRecord/overview_icon3.png);
  }

  .overview_ul > li.overview_li_4 {
    background-image: url(~@/assets/images/tx_answer/accessRecord/overview_icon4.png);
  }

  .overview_ul > li.overview_li_5 {
    background-image: url(~@/assets/images/tx_answer/accessRecord/overview_icon5.png);
  }

  /*分日数据*/
  .separation_box {
    padding: 0 20px;
    padding-top: 3px;
    margin-top: 17px;
    position: relative;
    z-index: 2;
    background-color: #fff;
    border-bottom: 10px solid #fff;
  }

  .separation_box_fixed {
    position: fixed;
    top: 151px;
    left: 210px;
    /*width: calc(100% - 210px);*/
    box-sizing: border-box;
  }

  .separation_nav {
    margin-top: 10px;
  }

  .separation_nav > li {
    width: 80px;
    height: 32px;
    box-sizing: border-box;
    text-align: center;
    line-height: 32px;
    border: 1px solid #DDDDDD;
    border-radius: 2px;
    margin-right: 8px;
    cursor: pointer;
  }

  .separation_nav > li.ative {
    background: rgba(28, 190, 204, 0.10);
    border: 1px solid #1CBECC;
  }

  /*表格*/
  .thead_table {
    position: absolute;
    top: 74px;
    left: 20px;
    z-index: 2;
    width: calc(100% - 40px);
    box-sizing: border-box;
  }

  /deep/.thead_table td {
    display: none;
  }

  .table_box {
    padding: 0 20px;
  }

  .table_box_fixed {
    margin-top: 81px;
  }

  .table_box .el-table th {
    background-color: #F5F5F5;
  }

  .table_box .el-table .table_border {
    border-right: 1px solid #eee;
  }

  .table_num_span {
    color: #53CDD8;
  }

  /*弹窗*/
  .record_mask_bg {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 101;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .4);
  }

  .record_mask {
    width: 540px;
    height: 100%;
    background-color: #fff;
    right: 0;
    position: absolute;
  }

  .record_mask_tit {
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background-color: #F5F5F5;
  }

  .record_mask_date {
    font-size: 14px;
    font-weight: bold;
  }

  .record_mask_duration {
    color: #666;
    margin-left: 10px;
  }

  .record_mask_duration span {
    color: #1CBECC;
  }

  .record_mask_close {
    position: absolute;
    width: 14px;
    right: 20px;
    top: 13px;
    cursor: pointer;
  }

  .record_mask_nav li {
    width: 90px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    position: relative;
    font-size: 14px;
    cursor: pointer;
  }

  .record_mask_nav li:before {
    content: '';
    position: absolute;
    height: 24px;
    width: 1px;
    right: 0;
    top: 50%;
    margin-top: -12px;
    background-color: #EEEEEE;
  }

  .record_mask_nav li:last-child:before {
    display: none;
  }

  .record_mask_nav li.ative {
    font-weight: bold;
  }

  .record_mask_nav li.ative:after {
    content: '';
    width: 28px;
    height: 3px;
    background-color: #1CBECC;
    position: absolute;
    left: 50%;
    margin-left: -14px;
    bottom: 10px;
    border-radius: 3px;
  }

  .record_mask_nav li.no_num {
    color: #BBBBBB;
  }

  .record_mask_con {
    padding: 0 20px;
    /*height: calc(100vh - 90px);
    overflow: auto;*/
  }

  .record_mask_item {
    margin-bottom: 20px;
  }

  .record_mask_item_tit {
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    background-color: #F5F5F5;
  }

  .record_mask_item_ul {
    height: calc(100vh - 100px);
    overflow: auto;
  }

  .record_mask_item_ul > li {
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    border-bottom: 1px solid #EEEEEE;
    padding: 0 10px;
  }

</style>
